<template>
  <div id="orderDetail">
    <com-head :opacity="0">订单详情</com-head>
    <div class="sellwell">
      <div class="bookList">
        <div class="left">
          <img :src="book">
        </div>
        <div class="right">
          <div class="name">{{bookname}}</div>
          <div class="abstract">{{abstract}}</div>
        </div>
        <div class="right right2">
          <div class="name">&yen;{{price}}</div>
          <div class="abstract">x{{num}}</div>
        </div>
      </div>
      <div class="sumprice">共{{num}}件商品 合计：¥{{ num * price}}</div>
    </div>
    <div class="message">
      <div class="item">
        <span>姓名</span>
        <input type="text" v-model="name" placeholder="收货人姓名">
      </div>
      <div class="item">
        <span>手机号</span>
        <input type="text" v-model="phone" placeholder="联系方式">
      </div>
      <div class="item" @click="cityalert=true">
        <span>区域选择</span>
        <input type="text" v-model="address">
        <i class="iconfont icon-qianjinxiayige"></i>
      </div>
      <div class="item">
        <span>详细地址</span>
        <input type="text" v-model="area" placeholder="请输入详细地址">
      </div>
    </div>
    <div class="buyBtn">
      <div class="box">合计：¥{{ num * price}}</div>
      <com-button  :disabled="isDisable" :click="buySome">提交订单</com-button>
    </div>

    <!-- 省市县三级联动 -->
    <div class="mask" @click="cityalert=false" v-show="cityalert">
      <div class="addressAlert">
        <div class="box">
          <span>所在地区</span>
          <button @click=" cityalert = false">确定</button>
        </div>
        <mt-picker :slots="myAddressSlots" @change="onMyAddressChange" :visibleItemCount="5"></mt-picker>
      </div>
    </div>
  </div>
</template>

<script>
import myaddress from "../assets/js/province.js"; //引入省市区数据
export default {
  name: "orderDetail",
  data() {
    return {
      isDisable: false,
      id: this.$route.query.id,
      num: this.$route.query.num,
      book: '',
      bookname: "",
      abstract: "",
      num: this.$route.query.num,
      price: "",

      name: "",
      phone: "",
      address: "",
      area: "",
      cityalert: false,
      myAddressSlots: [
        {
          flex: 1,
          defaultIndex: 1,
          values: Object.keys(myaddress), //省份数组
          className: "slot1",
          textAlign: "center"
        },
        {
          divider: true,
          content: "——",
          className: "slot2"
        },
        {
          flex: 1,
          values: ["市辖区"],
          className: "slot3",
          textAlign: "center"
        },
        {
          divider: true,
          content: "——",
          className: "slot4"
        },
        {
          flex: 1,
          values: ["东城区"],
          className: "slot5",
          textAlign: "center"
        }
      ],
      myAddressProvince: "省",
      myAddressCity: "市",
      myAddresscounty: "区/县"
    };
  },

  computed: {
    sumprice: function() {
      return this.num * this.price;
    }
  },

  created() {
    this.loading();
  },

  mounted() {
    this.$nextTick(() => {
      //vue里面全部加载好了再执行的函数  （类似于setTimeout）
      this.myAddressSlots[0].defaultIndex = 0;
      // 这里的值需要和 data里面 defaultIndex 的值不一样才能够初始化
      //因为我没有看过源码（我猜测是因为数据没有改变，不会触发更新）
    });
  },

  methods: {
    loading() {
      this.axios
        .post("index/detail", {
          book_id: this.id
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
            this.bookname = data.data.name;
            this.price = data.data.price;
            this.book = data.data.img.image;
            this.abstract = data.data.book_sign;
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    buySome() {
      let regTel = /^(1[3-9])\d{9}$/;
      if(!this.phone||!this.name){
        this.$bus.$emit("toast", "输入信息不能为空");
      } else if (!regTel.test(this.phone)) {
        this.$bus.$emit("toast", "手机号码不合法");
      } else {
        this.isDisable = true
        setTimeout(() => {
        this.isDisable = false
        }, 1000)
        console.log(112323);
        this.axios
        .post("index/order", {
          token: this.token(),
          book_id: this.id,
          province: this.myAddressProvince,
          city: this.myAddressCity,
          district: this.myAddresscounty,
          address: this.area,
          phone: this.phone,
          recipient: this.name,
          number: this.num,
          order_pay_price: this.sumprice
        })
        .then(({ data }) => {
          console.log(data);
          if (data.code === "200") {
             const jsApiParameters = data.data;
             this.jsSdk(jsApiParameters);
          } else if (data.code === "201") {
            this.$bus.$emit("toast", data.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      }
    },
    onMyAddressChange(picker, values) {
      if (myaddress[values[0]]) {
        //这个判断类似于v-if的效果（可以不加，但是vue会报错，很不爽）
        picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
        picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
        this.myAddressProvince = values[0];
        this.myAddressCity = values[1];
        this.myAddresscounty = values[2];
        this.address = values[0] + values[1] + values[2];
      }
    },
     // 支付
    jsSdk(jsApiParameters) {
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: jsApiParameters.appId,
          package: jsApiParameters.package,
          nonceStr: jsApiParameters.nonceStr,
          timeStamp: jsApiParameters.timeStamp,
          signType: jsApiParameters.signType,
          paySign: jsApiParameters.paySign
        },
        // jsApiParameters,
        function(res) {
          WeixinJSBridge.log(res);
          var result = res.err_msg;
          if (result == "get_brand_wcpay_request:ok") {
            alert("支付成功");
            var url = "http://shopq.xiaohanbo.com/bookOrder";            
          } else {
            alert("你取消了支付");
            var url = "http://shopq.xiaohanbo.com/buy";            
          }
          window.location.href = url;
        }
      );
    },
  }
};
</script>
<style lang='scss' scoped>
#orderDetail {
  .sellwell {
    margin-top: 20px;
    background-color: #fff;
    padding: 0 32px;
    .bookList {
      height: 220px;
      display: flex;
      justify-content: flex-start;
      .left {
        width: 120px;
        height: 156px;
        border-radius: 6px;
        margin-top: 30px;
        overflow: hidden;
        // border: 1Px solid #eee;
        box-shadow: 4px 4px 10px #aaa;
        img {
          display: block;
          width: 80%;
          height: 80%;
          margin: 18px auto;
        }
      }
      .right {
        width: 430px;
        height: 150px;
        margin-top: 40px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 26px;
        color: rgba(153, 153, 153, 1);
        .name {
          color: #222;
          font-size: 30px;
        }
        .abstract {
          height: 200px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      .right2 {
        width: 150px;
        text-align: right;
      }
    }
    .sumprice {
      height: 96px;
      width: 686px;
      line-height: 96px;
      margin: 0 auto;
      background-color: #fff;
      border-top: 2px solid #f6f6f6;
      text-align: right;
      color: rgba(34, 34, 34, 1);
      font-size: 26px;
    }
  }
  .message {
    margin-top: 20px;
    padding: 0 32px;
    box-sizing: border-box;
    background-color: #fff;
    .item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1Px solid rgba(238, 238, 238, 1);
      line-height: 102px;
      span {
        width: 120px;
        text-align: left;
      }
      input {
        width: 450px;
        text-align: right;
        font-size: 30px;
        margin-right: 0;
        color: #000;
      }
      input::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #999;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
      }

      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
      }

      input:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #999;
      }
    }
    .item:nth-of-type(4) {
      border: none;
    }
  }
  .buyBtn {
    position: fixed;
    bottom: 0vh;
    left: 50%;
    width: 750px;
    height: 100px;
    margin-left: -375px;
    background: #fff;
    box-shadow: 0 -10px 10px #eee;
    display: flex;
    justify-content: space-between;
    align-self: center;
    .box {
      margin-left: 32px;

      line-height: 100px;
    }
    .com_button {
      margin-top: 11px;
      margin-right: 32px;
    }
  }
  .mask {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    .addressAlert {
      width: 630px;
      padding: 30px;
      border-radius: 10px;
      position: absolute;
      top: 30vh;
      left: 30px;
      background-color: #fff;
      .box {
        margin: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      button {
        padding: 5px 8px;
        border-radius: 3px;
        background-color: rgb(238, 236, 236);
      }
    }
  }
}
</style>